<script>
import {handleSuccess, handleError} from "@/util/request";
export default {
  name: "InventorySavePage",
  data() {
    return {
      item : {type:''},
      rules: {
        /*material_id: [
          { required: true, message: '请输入出入库物资名称', trigger: 'blur' },
        ],*/
		materialName: [
		  { required: true, message: '请选择出入库物资名称', trigger: 'blur' },
		],
		quantity: [
          { required: true, message: '请输入出入库物资数量', trigger: 'blur' },
        ],
		type: [
          { required: true, message: '请选择出库或入库', trigger: 'change' },
        ]
      },
      action: process.env.VUE_APP_API_BASE + 'inventory/batch-import',
      loading: null,
	  loading_material_name : false,
	  options: [],
      value: [],
      list: [],
	  states: ["Alabama", "Alaska", "Arizona",
        "Arkansas", "California", "Colorado",
        "Connecticut", "Delaware", "Florida",
        "Georgia", "Hawaii", "Idaho", "Illinois",
        "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Maryland",
        "Massachusetts", "Michigan", "Minnesota",
        "Mississippi", "Missouri", "Montana",
        "Nebraska", "Nevada", "New Hampshire",
        "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Ohio",
        "Oklahoma", "Oregon", "Pennsylvania",
        "Rhode Island", "South Carolina",
        "South Dakota", "Tennessee", "Texas",
        "Utah", "Vermont", "Virginia",
        "Washington", "West Virginia", "Wisconsin",
        "Wyoming"]
    }
  },
  mounted() {
	this.$http.get('/material/list')
		.then((result)=>{
			this.list = result.data.data.map(item => {
				return { value: `${item.id}`, label: `${item.name}` };
			});
		})
		.catch((error) => {
			handleError(error)
		});
  },
  methods: {
    handleSubmit(formName) {
	  let item2 = {
	    materialID : this.item.material_id,
		materialID : this.value,
		quantity : this.item.quantity,
		type : this.item.type,
		operator : this.item.operator,
		remarks : this.item.remarks
	  }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http.post('/inventory/change', item2)
              .then((result)=>{
                handleSuccess(result)
              })
              .catch((error) => {
                handleError(error)
              })
        }
      });
    },
    handleReset(formName) {
      this.$refs[formName].resetFields();
    },
    beforeUpload() {
      this.loading = this.$loading({
        lock: true,
        text: '正在上传',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    onSuccess(result) {
      handleSuccess({data: result})
      this.loading.close()
    },
    onError(error) {
      handleError(error)
      this.loading.close()
    },
	remoteMethod(query) {
	  if (query !== '') {
	    this.loading = true;
	    setTimeout(() => {
		  this.loading = false;
		  this.options = this.list.filter(item => {
		    return item.label.toLowerCase()
		  	  .indexOf(query.toLowerCase()) > -1;
		  });
	    }, 200);
	  } else {
	    this.loading = true;
	    setTimeout(() => {
		  this.loading = false;
		  this.options = this.list;
	    }, 200);
	  }
    }
  }
}
</script>

<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>添加物资</span>
      <el-upload :action="action"
                 accept=".xls,.xlsx"
                 :show-file-list="false"
                 :before-upload="beforeUpload"
                 :on-success="onSuccess"
                 :on-error="onError"
                 with-credentials
                 style="float: right">
        <el-button style="padding: 3px 0" type="text">批量导入Excel</el-button>
      </el-upload>
    </div>
    <el-form label-width="100px" ref="myForm" :model="item" :rules="rules">
	  <el-form-item label="物资名称" prop="materialName">
		<el-select
			v-model="value"
			clearable
			filterable
			remote
			placeholder="物资名称"
			:remote-method="remoteMethod"
			:loading="loading_material_name">
			<el-option
				v-for="item in options"
				:key="item.value"
				:label="item.label"
				:value="item.value">
				</el-option>
		</el-select>
	  </el-form-item>
      <!--<el-form-item label="物资ID" prop="material_id">
        <el-input v-model="item.material_id" placeholder="物资ID" />
      </el-form-item>-->
      <el-form-item label="库存数量" prop="quantity">
        <el-input v-model="item.quantity" placeholder="数量" />
      </el-form-item>
	  <el-form-item label="出库/入库" prop="type">
			<el-radio-group v-model="item.type">
				<el-radio-button label="0">入库</el-radio-button>
				<el-radio-button label="1">出库</el-radio-button>
			</el-radio-group>
      </el-form-item>
	  <el-form-item label="操作人" prop="operator">
        <el-input v-model="item.operator" placeholder="操作人" />
      </el-form-item>
	  <el-form-item label="备注" prop="remarks">
        <el-input v-model="item.remarks" placeholder="备注" />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleSubmit('myForm')" type="primary">提交</el-button>
        <el-button @click="handleReset('myForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<style scoped>

</style>